<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>FAQ列表</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-size: 12px;
			}

			a {
				color: #000;
				text-decoration: none;
			}

			#menu {
				margin: 30px;
				width: 188px;
				background-color: #EFFDFA;

			}

			#menu .top {
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				font-weight: bold;
				text-align: center;
				border: 1px solid #93D6C5;
				border-bottom: none;
			}

			#menu ul.nav {
				list-style: none;

			}

			#menu ul.nav li {
				display: block;
				height: 30px;
				line-height: 30px;
				border: 1px solid #93D6C5;
				border-top: none;
				padding-left: 30px;
				background: url(images/point.jpg) no-repeat 15px center;
			}

			#menu ul.nav li.lastone {
				border: none;
				cursor: pointer;
				background: #fff url(images/up.jpg) no-repeat center top;
			}

			#menu ul.nav li.up {
				background: #fff url(images/down.jpg) no-repeat center top;
			}

			span.icon {
				float: right;
				margin-right: 10px;
				margin-top: 10px;
			}
		</style>

	</head>
	<body>
		<div id="menu">
			<div class="top">全部商品详细分类</div>
			<ul class="nav">
				<li><a href="#">尾品汇</a></li>
				<li><a href="#">图书音像数字管</a></li>
				<li><a href="#">美妆个护</a></li>
				<li><a href="#">家具、家纺、家装</a></li>
				<li><a href="#">鞋靴、箱包</a></li>
				<li><a href="#">珠宝装饰</a></li>
				<li><a href="#">手表/眼镜/礼品</a></li>
				<li><a href="#">运动户外</a></li>
				<li><a href="#">食品、茶、酒</a></li>
				<li><a href="#">手机、数码</a></li>
				<li><a href="#">电脑办公</a></li>
				<li class="lastone"></li>
			</ul>
		</div>

	</body>
	<script src="js/jquery-1.8.3.min.js"></script>
	<script>
		  $(document).ready(function () {
		         // 为最后一项添加点击事件
		         $(".lastone").click(function () {
		             // 切换最后一项的类名
		             $(this).toggleClass("up");
		             // 切换从第8项（索引为7）开始往后的列表项的显示和隐藏状态
		             $(".nav li:gt(6):not(.lastone)").toggle();
		         });
		     });
	</script>
</html>